<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>澡堂</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,'user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <form class="layui-form layui-col-space5">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">澡堂编号:</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="regionId" id="'regionId" autocomplete="off"
                                            class="layui-input" placeholder="请输入">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">浴室状态:</label>
                                    <div class="layui-input-inline">
                                        <select name="regionState">
                                            <option value="">订单状态</option>
                                            <option value="使用中">使用中</option>
                                            <option value="已预约">已预约</option>
                                            <option value="空闲">空闲</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item" style="text-align: center">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" lay-submit lay-filter="seach">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary" id="doReset">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-header">
                        <button class="layui-btn layui-btn-danger" id="delAll">
                            <i class="layui-icon"></i>批量删除</button>
                        <button class="layui-btn" onclick="xadmin.open('添加澡堂','./region-add.html',800,750)">
                            <i class="layui-icon"></i>添加</button></div>
                    <div class="layui-card-body ">
                        <table class="layui-hide" id="regionTable" lay-filter="regionTable"></table>
                    </div </div>
                </div>
            </div>
        </div>
        <div style="display: none" id="regionbar" type="text/html">
            <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
        </div>
</body>
<script>layui.use(['laydate', 'form', 'table'],
        function () {
            var laydate = layui.laydate;
            var table = layui.table;
            var form = layui.form;
            table.render({
                elem: '#regionTable',
                id: 'region'
                , url: '/getRegionList'
                , cellMinWidth: 80
                , cols: [[
                    { type: 'checkbox', fixed: 'left', width: "3%" }
                    , { field: 'regionId', title: '澡堂编号', sort: true, minWidth: 100 }
                    , { field: 'regionName', title: '澡堂名称', minWidth: 100 }
                    , {
                        field: 'regionImgs', title: '澡堂图片', minWidth: 100,
                        templet: function (d) {
                            if (d.regionImgs.length) {
                                return '<div ><img src=' + d.regionImgs[0] + ' style="width: 50px;" alt=""></div>'
                            } else {
                                return '<div ><img  src="" style="width: 50px;" alt=""></div>'
                            }

                        }
                    }
                    , { field: 'regionPrice', title: '澡堂单价', minWidth: 100 }
                    , { field: 'regionIntroduce', title: '澡堂简介', minWidth: 100 }
                    , { field: 'regionDate', title: '创建时间', minWidth: 100 }
                    , { field: 'regionState', title: '澡堂状态', minWidth: 100, templet: '#isusing' }
                    , { title: '操作', toolbar: '#regionbar' }
                ]]
                , page: true
                , skin: 'row'
                , even: true
                , size: 'lg'
            });

            form.on('submit(seach)', function (data) {
                table.reload('region', {
                    where: data.field
                });
            });

            $('#doReset').on('click', function () {
                location.reload();
            });

            table.on('tool(regionTable)', function (obj) {
                var regionId = obj.data.regionId;
                if (obj.event === 'detail') {
                    xadmin.open('澡堂详情', './region-detail.html?regionId=' + regionId, 600, 600, function () {
                        table.reload('region');
                    })
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除该澡堂吗?', function (index) {
                        $.ajax({
                            type: "Post",
                            url: "/delRegion",
                            data: { regionId: regionId },
                            dataType: "json",
                            success: (data) => {
                                if (data.code) {
                                    table.reload('region');
                                    layer.msg('删除成功', {
                                        icon: 1
                                    });
                                    layer.close(index);
                                }
                            }
                        });
                    });
                } else if (obj.event === 'edit') {
                    xadmin.open('编辑澡堂', './region-edit.html?regionId=' + regionId, 800, 750)
                }
            });

            $('#delAll').on('click', function () {
                var ids = [];
                var checkStatus = table.checkStatus('region')
                    , data = checkStatus.data;
                ids = data.map(item => {
                    return item.regionId;
                })
                layer.confirm('确认要删除吗？' + ids.toString(), function (index) {
                    $.ajax({
                        type: "Post",
                        url: "/delRegion",
                        contentType: 'application/json',
                        data: JSON.stringify({ regionId: ids }),
                        dataType: "json",
                        success: (data) => {
                            if (data.code) {
                                table.reload('region');
                                layer.msg('删除成功', {
                                    icon: 1
                                });
                                layer.close(index);
                            }
                        }
                    });
                });
            })
        });

</script>

</html>